<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-repeat</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>

        <script >
            var model = avalon.define("test", function(vm) {

                vm.double_ = [[1, 2], [4, 5], [7, 8]]
                vm.single = ["aaaa", "bbb", "cccc"]


                vm.item = {checked: "这个不受影响"}
                vm.items = [{checked: false}, {checked: false}, {checked: false}]

                vm.list = [{action: "inner"}];
                vm.action = "outer";

                vm.aaa = false

            })
            setTimeout(function() {
                model.action = "modify"
                model.double_[0].set(1, "更新了")
            }, 3000)




        </script>
        <style>
            table{
                border-collapse: collapse;
                border:1px solid black;
                width:100%;
            }
            td{
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <fieldset ms-controller="test">

            <h3>这是单个循环，原数组是一个一维数组</h3>
            <table>
                <tr ms-repeat="single">
                    <td>{{el}}</td>
                </tr>
            </table>
            <h3>这是双重循环，原数组是一个二维数组</h3>
            <table>
                <tr ms-repeat-elem="double_">
                    <td ms-repeat="elem">{{el}}</td>
                </tr>
            </table>
            <h3>测试作用域</h3>
            <div style="border:1px solid red;padding: 5px;">
                <div>{{action}}</div>
                <div ms-repeat-item="list">
                    <div>{{action}} or {{item.action}}</div>
                </div>
            </div>
            <div style="border:1px solid green;padding: 5px;">
                <p>{{item.checked}}</p>
                <p ms-repeat-item='items'>
                    <input type='checkbox' ms-duplex-radio='item.checked' /> {{item.checked}}
                </p>
            </div>
            <h3>另一个不相关的实现，是数据填空的</h3>
            <input type='checkbox' ms-duplex-radio='aaa' /> {{aaa}}  <em ms-html="aaa"></em>  <b ms-text="aaa"></b>
        </fieldset>


    </body>
</html>
